<!--  -->
<template>
  <a-spin :spinning="spinning" class="content">
    <div style="background: #ececec; padding: 30px">
      <a-row :gutter="gutter">
        <a-col
          :xs="span.xs"
          :sm="span.sm"
          :md="span.md"
          :lg="span.lg"
          :xl="span.xl"
          :xxl="span.xxl"
        >
          <a-card>
            <a-statistic
              title="UV"
              :value="888"
              :precision="2"
              suffix="人"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <a-icon type="arrow-up" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col
          :xs="span.xs"
          :sm="span.sm"
          :md="span.md"
          :lg="span.lg"
          :xl="span.xl"
          :xxl="span.xxl"
        >
          <a-card>
            <a-statistic
              title="PV"
              :value="8888"
              :precision="2"
              suffix="次"
              class="demo-class"
              :value-style="{ color: '#cf1322' }"
            >
              <template #prefix>
                <a-icon type="arrow-down" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col
          :xs="span.xs"
          :sm="span.sm"
          :md="span.md"
          :lg="span.lg"
          :xl="span.xl"
          :xxl="span.xxl"
        >
          <a-card>
            <a-statistic
              title="咨询量"
              :value="258"
              :precision="2"
              suffix="次"
              class="demo-class"
              :value-style="{ color: '#cf1322' }"
            >
              <template #prefix>
                <a-icon type="qq" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col
          :xs="span.xs"
          :sm="span.sm"
          :md="span.md"
          :lg="span.lg"
          :xl="span.xl"
          :xxl="span.xxl"
        >
          <a-card>
            <a-statistic
              title="成交量"
              :value="100"
              :precision="2"
              suffix="单"
              class="demo-class"
              :value-style="{ color: '#cf1322' }"
            >
              <template #prefix>
                <a-icon type="alipay" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="pageSize mt10">
      查询周期：
      <a-select v-model="pageSize" @change="init" style="width: 100px">
        <a-select-option :value="7"> 七天内 </a-select-option>
        <a-select-option :value="15"> 15天内 </a-select-option>
        <a-select-option :value="30"> 30天内 </a-select-option>
      </a-select>
      <a-button type="link" @click="jumpVisit">查看更多</a-button>
    </div>
    <aEcharts ref="aEcharts2" id="aEcharts2" />
    <aEcharts ref="aEcharts" id="aEcharts" />
  </a-spin>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      api: {
        visitPage: "/admin_server/visit/page",
      },
      visit: [],
      spinning: false,
      pageSize: 7,
      gutter: {
        xs: 0,
        sm: 10,
        md: 0,
        lg: 0,
        xl: 20,
        xxl: 20,
      },
      span: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 6,
        xl: 6,
        xxl: 6,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    jumpVisit() {
      this.$router.push("/sys/visit");
    },
    async init() {
      let param = {
        pageNo: 1,
        pageSize: this.pageSize,
      };
      this.spinning = true;
      const res = await this.$request.get1(this.api.visitPage, param);
      this.spinning = false;
      if (res.success) {
        this.visit = res.result.records;
        // 倒序
        this.visit = this.visit.reverse();
      }
      this.$refs.aEcharts.init(
        this.conventData(),
        "访问统计",
        "统计截止昨日23:59:00",
        "line"
      );
      this.$refs.aEcharts2.init(
        this.conventData2(),
        "日活统计",
        "统计截止昨日23:59:00",
        "line"
      );
    },
    conventData() {
      let res = [];
      let data1 = {
        name: "接口调用次数",
        data: this.conventApiNum(),
      };
      res.push(data1);
      return res;
    },
    conventData2() {
      let res = [];
      let data2 = {
        name: "IP访问人数",
        data: this.conventIpNum(),
      };
      res.push(data2);
      return res;
    },
    conventApiNum() {
      return this.visit.map((x) => {
        let data = {};
        data.name = x.createTime;
        data.data = x.apiNum;
        return data;
      });
    },
    conventIpNum() {
      return this.visit.map((x) => {
        let data = {};
        data.name = x.createTime;
        data.data = x.ipNum;
        return data;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.content {
  padding: 20px;

  .pageSize {
    margin-left: 80%;
  }
}
</style>